<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2025/3/27
  Time: 08:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通讯录 - OA办公系统</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
<div class="container mx-auto fade-in">
  <!-- 页面标题 -->
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">通讯录</h1>
    <div class="flex space-x-2">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect">
        <i class="fas fa-user-plus mr-2"></i>
        <span>添加联系人</span>
      </button>
      <div class="relative">
        <input type="text" placeholder="搜索联系人" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
      </div>
    </div>
  </div>

  <!-- 通讯录主体 -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <!-- 左侧部门列表 -->
    <div class="col-span-1">
      <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b">
          <h3 class="font-medium text-gray-800">部门列表</h3>
        </div>
        <div class="p-2">
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 bg-blue-50 rounded-lg hover:bg-blue-100">
                <i class="fas fa-building w-5 text-blue-500"></i>
                <span class="ml-2">全公司</span>
                <span class="ml-auto bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">128</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-chart-line w-5 text-blue-500"></i>
                <span class="ml-2">市场部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">24</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-code w-5 text-blue-500"></i>
                <span class="ml-2">技术部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">36</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-dollar-sign w-5 text-blue-500"></i>
                <span class="ml-2">财务部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">12</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-users w-5 text-blue-500"></i>
                <span class="ml-2">人力资源部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">18</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-truck w-5 text-blue-500"></i>
                <span class="ml-2">物流部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">15</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-blue-100">
                <i class="fas fa-headset w-5 text-blue-500"></i>
                <span class="ml-2">客服部</span>
                <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">23</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 常用联系人 -->
      <div class="bg-white rounded-lg shadow mt-6">
        <div class="p-4 border-b">
          <h3 class="font-medium text-gray-800">常用联系人</h3>
        </div>
        <div class="p-4">
          <div class="flex flex-wrap gap-2">
            <div class="flex flex-col items-center">
              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="联系人头像" class="h-12 w-12 rounded-full mb-1">
              <span class="text-xs text-gray-700">王总监</span>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="联系人头像" class="h-12 w-12 rounded-full mb-1">
              <span class="text-xs text-gray-700">李经理</span>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="联系人头像" class="h-12 w-12 rounded-full mb-1">
              <span class="text-xs text-gray-700">赵主管</span>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="联系人头像" class="h-12 w-12 rounded-full mb-1">
              <span class="text-xs text-gray-700">张工</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧联系人列表 -->
    <div class="col-span-3">
      <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b flex justify-between items-center">
          <h3 class="font-medium text-gray-800">全公司 (128人)</h3>
          <div class="flex space-x-2">
            <button class="p-2 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
              <i class="fas fa-th-large"></i>
            </button>
            <button class="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
              <i class="fas fa-list"></i>
            </button>
          </div>
        </div>

        <!-- 字母索引 -->
        <div class="p-2 bg-gray-50 flex flex-wrap">
          <a href="#A" class="w-8 h-8 flex items-center justify-center text-blue-500 hover:bg-blue-100 rounded-full">A</a>
          <a href="#B" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">B</a>
          <a href="#C" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">C</a>
          <a href="#D" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">D</a>
          <a href="#E" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">E</a>
          <a href="#F" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">F</a>
          <a href="#G" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">G</a>
          <a href="#H" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">H</a>
          <a href="#I" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">I</a>
          <a href="#J" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">J</a>
          <a href="#K" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">K</a>
          <a href="#L" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">L</a>
          <a href="#M" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">M</a>
          <a href="#N" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">N</a>
          <a href="#O" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">O</a>
          <a href="#P" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">P</a>
          <a href="#Q" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">Q</a>
          <a href="#R" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">R</a>
          <a href="#S" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">S</a>
          <a href="#T" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">T</a>
          <a href="#U" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">U</a>
          <a href="#V" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">V</a>
          <a href="#W" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">W</a>
          <a href="#X" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">X</a>
          <a href="#Y" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">Y</a>
          <a href="#Z" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-blue-100 rounded-full">Z</a>
